<template>
  <el-dialog
    title="站点详情"
    :visible.sync="dialogVisible"
    width="808px"
    class="dialogTitle"
    @closed="dialogClosed('detailForm')"
  >
    <div v-loading="loading">
      <el-form label-width="120px" ref="detailForm" :model="dialogData">
        <el-form-item label="站点名称" prop="siteName">
          <el-input v-model="dialogData.siteName" :disabled="true"></el-input>
        </el-form-item>
        <!-- <el-form-item label="站点编码" prop="siteNumber">
        <el-input v-model="dialogData.siteNumber"></el-input>
      </el-form-item> -->
        <el-form-item label="所属企业" prop="enterprise">
          <el-input v-model="dialogData.enterprise" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="站点简称" prop="siteAbbreviation">
          <el-input v-model="dialogData.siteAbbreviation" :disabled="true"></el-input>
        </el-form-item>
        <!-- <el-form-item label="站点类型" prop="siteTypeValue">
        <el-select class="form-select" v-model="dialogData.siteTypeValue" clearable>
          <el-option
            v-for="item in dialogData.siteType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
        <!-- <el-form-item label="超重设备" prop="overWeightEquipment">
        <el-select class="form-select" v-model="dialogData.overWeightEquipment" clearable>
          <el-option
            v-for="item in dialogData.overWeightEquipmentOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="dialogData.phone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="位置" prop="location">
          <label slot="label">位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置</label>
          <el-input v-model="dialogData.location" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <label slot="label">经&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度</label>
          <el-input v-model="dialogData.longitude" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="纬度" class="spacingL" prop="latitude">
          <label slot="label">纬&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度</label>
          <el-input v-model="dialogData.latitude" :disabled="true"></el-input>
        </el-form-item>
        <!-- <el-form-item label="检测方向" prop="detectionDirection">
        <el-input v-model="dialogData.detectionDirection"></el-input>
      </el-form-item> -->
        <el-form-item label="车道数量" prop="lanesNumber">
          <el-input v-model="dialogData.lanesNumber" :disabled="true"></el-input>
        </el-form-item>
        <!-- <el-form-item label="站点负责人" prop="siteAgent">
        <el-select class="form-select" v-model="dialogData.siteAgent" clearable>
          <el-option
            v-for="item in dialogData.siteAgentOption"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      </el-form>
      <div>
        <span class="stepsTitle">15天内违法历史记录</span>
        <cs-steps :recordData="dialogData.recordData" @handleMoreBtnClick="handleMoreBtnClick" />
      </div>
      <!-- <div class="dialog-footer">
      <cs-btn
        type="primary"
        @click.native="confirmBtnClick('detailForm')"
        btnText="确定"
        class="confirm_btn dialog_btn"
      />
      <cs-btn @click.native="cancelBtnClick('detailForm')" btnText="取消" class="dialog_btn" />
    </div> -->
    </div>
  </el-dialog>
</template>

<script>
// import csBtn from '@/components/cs-btn/cs-btn.vue'
import csSteps from '@/components/cs-steps/cs-steps.vue'

import { getSiteDetailByID } from '@/service/operate/site_manage/site_manage'
import { toPercentage } from '@/utils/dataConversion'

export default {
  components: {
    // csBtn,
    csSteps
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      dialogData: {
        siteName: '',
        // siteNumber: '',
        enterprise: '',
        siteAbbreviation: '',
        siteType: [
          {
            value: '所有',
            label: '所有'
          },
          {
            value: '快速动态检测站',
            label: '快速动态检测站'
          },
          {
            value: '固定点',
            label: '固定点'
          },
          {
            value: '收费站',
            label: '收费站'
          }
        ],
        // siteTypeValue: '',
        // overWeightEquipment: '',
        // overWeightEquipmentOption: [],
        phone: '',
        location: '',
        // 经度
        longitude: '',
        // 纬度
        latitude: '',
        // 检测方向
        // detectionDirection: '',
        // siteAgent: '',
        // siteAgentOption: [],
        // 车道数量
        lanesNumber: '',
        recordData: []
      }
    }
  },
  created() {
    this.$bus.$on('detailSiteDialogVisible', (id) => {
      console.log(id)
      this.getSiteDetailByID(id)
      this.dialogVisible = true
    })
  },
  methods: {
    // 对话框关闭事件
    dialogClosed(formName) {
      this.resetForm(formName)
      // this.$bus.$off('siteManageJunkToDetail')
    },
    confirmBtnClick(formName) {
      this.dialogVisible = false
      this.resetForm(formName)
    },
    cancelBtnClick(formName) {
      this.dialogVisible = false
      this.resetForm(formName)
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleMoreBtnClick(id) {
      // this.$router.push({
      //   path: '/home/data_search/detail',
      //   query: {
      //     id,
      //     dataId: this.dialogData.id,
      //     fromSource: 'site'
      //   }
      // })
      this.$bus.$emit('siteManageJunkToDetail', {
        id,
        dataId: this.dialogData.id,
        fromSource: 'site'
      })
    },
    async getSiteDetailByID(id, offset = 15) {
      this.loading = true
      try {
        const { data } = await getSiteDetailByID({ id, offset })
        console.log(data)
        if (data.code === 0) {
          const entity = data.data.entity
          const recordVoList = data.data.recordVoList
          console.log(entity)
          console.log(recordVoList)
          // 拼接输入框数据
          this.dialogData.id = entity.id
          this.dialogData.siteName = entity.name
          // this.dialogData.siteNumber = entity.siteCode
          this.dialogData.enterprise = entity.companyName
          this.dialogData.siteAbbreviation = entity.siteAlias
          // this.dialogData.siteTypeValue = entity.type
          // this.dialogData.overWeightEquipment = entity.deviceName
          this.dialogData.phone = entity.phone
          this.dialogData.location = entity.location
          this.dialogData.longitude = entity.longitude
          this.dialogData.latitude = entity.latitude
          // this.dialogData.detectionDirection = entity.checkDirection
          this.dialogData.lanesNumber = entity.laneNum
          // 拼接cs-steps数据
          this.dialogData.recordData = []
          recordVoList.forEach((item) => {
            // item.ratio = Number(item.ratio).toFixed(2)
            item.time = item.time.split('-')
            item.time = item.time[1] + '-' + item.time[2]
            this.dialogData.recordData.push({
              id: item.id,
              level: this.getStepType(item.overweightType),
              percent: toPercentage(item.ratio).handleNum2 + '%',
              time: item.time,
              carModel: item.siteName
            })
          })
          this.loading = false
        } else {
          this.$message.error('获取站点详情失败')
          this.loading = false
        }
      } catch (err) {
        this.$message.error('获取站点详情失败')
        console.log(err)
        this.loading = false
      }
    },
    // 判断cs-step的类型
    getStepType(type) {
      if (type === 0) {
        return 'success'
      } else if (type === 1) {
        return 'warning'
      } else if (type === 2) {
        return 'serious'
      } else {
        return 'danger'
      }
    }
  }
}
</script>

<style scoped>
/* 对话框样式start */
/* 更改el-select下拉框图标的行高 */
.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.el-form-item >>> .el-form-item__label {
  padding: 0;
  padding-right: 46px;
  color: #888888;
}

.dialogTitle >>> .el-dialog {
  padding: 6px 10px 18px 10px !important;
}

.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.form-select {
  width: 100%;
}

/* 进度条标题 */
.stepsTitle {
  display: inline-block;
  font-size: 18px;
  margin-bottom: 12px;
}

.cs-step {
  width: 752px;
}
/* 对话框样式end */
</style>
